const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require("vue-loader");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: {
        index: "./src/js/index.js",
    }, // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
    output: {
        path: path.resolve(__dirname, "./dist"), // 项目的打包文件路径
        publicPath: "./",
        filename: "./js/[name].js", // 打包后的文件名
    },
    devServer: {
        hot: true, // 启用热模块替换
        liveReload: true, // 启用自动刷新
        watchContentBase: true, // 监控内容目录的变化
        contentBase: path.join(__dirname, "./"),
        publicPath: "/",
        compress: true,
        host: "127.0.0.1",
        port: 8080,
        inline: true,
        //historyApiFallback: true, //historyApiFallback设置为true那么所有的路径都执行index.html。
        overlay: true, // 将错误显示在html之上
        proxy: {
            // "/AirCIMLASProServer": {
            //     target: 'http://127.0.0.1:8080',
            //     changeOrigin: true,
            //     pathRewrite: { "/AirCIMLASProServer": "/" }, // pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。
            // },
            // '/map': {
            //     target: 'https://xc-dt.huadu.gov.cn/demomap', // 外部网站的地址
            //     secure: false, // 如果是 HTTPS，需要配置证书
            // },
            "/screenConfigDemo/": {
                target: 'https://xc-dt.huadu.gov.cn',
                changeOrigin: true,
                pathRewrite: { '^/screenConfigDemo/': '/screenConfigDemo/' },
                secure: false,
            },
            "/demomap/": {
                target: 'https://xc-dt.huadu.gov.cn',
                changeOrigin: true,
                pathRewrite: { '^/demomap/': '/demomap/' },
                secure: false,
            }
        },
    },
    resolve: {
        extensions: [".js", ".vue", ".json", ".css"],
        alias: {
            vue: "vue/dist/vue.min.js",
            "@": path.resolve(__dirname, "./src"),
            "@~": path.resolve(__dirname, "./static"),
        },
    },
    optimization: {
        minimize: true,
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: false,
            __VUE_PROD_DEVTOOLS__: false,
        }),
        new HtmlWebpackPlugin({
            filename: "index.html", // 配置输出文件名和路径
            template: "./index.html", // 配置要被编译的html文件
            chunks: ["index"],
            hash: false,
            minify: false,
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        //分离抽取css
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
            chunkFilename: "css/[id].css",
            linkType: "text/css",
            insert: function (linkTag) {
                var reference = document.querySelector("#some-element");
                if (reference) {
                    reference.parentNode.insertBefore(linkTag, reference);
                }
            },
        }),
    ],
    // 加载模块
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ["babel-loader"],
                exclude: /node_modules/,
            },
            {
                //vue文件加载器
                test: /\.vue$/,
                loader: "vue-loader",
            },
            {
                // 匹配所有css文件, 用style和css工具解析
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        //为图像、文件等外部资源指定自定义的公共路径
                        publicPath: "../",
                    },
                },
                    "css-loader",
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../",
                    },
                },
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|svg|jepg|gif|jpg)/,
                type: "asset/resource",
                generator: {
                    filename: "images/[name].[hash][ext][query]",
                },
            },
            {
                //处理字体文件的loader
                test: /\.(OTF|ttf|svg|eot|woff|woff2|TTF|otf)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        esModule: false,
                        name: "font/[hash].[ext]",
                    },
                },],
            },
        ],
    },
};